import React, {PureComponent} from 'react';
import {
	StyleSheet, Text,
	View,
	WebView
} from 'react-native';

/**
 * @FileName: Detail
 * @Author: mazaiting
 * @Date: 2018/6/12
 * @Description:
 */
class Detail extends PureComponent {
	// 设置导航器属性
	static navigationOptions = {
		title: 'Detail'
	};
	constructor(props) {
		super(props);
		this.state = {
			// 具体的数据
			detailData: ''
		}
	}
	render() {
		return (
			<WebView
				automaticallyAdjustContentInsets={true}
				style={styles.webView}
				source={{html: this.state.detailData, baseUrl: ''}}
				domStorageEnabled={true}
				javaScriptEnabled={true}
				startInLoadingState={true}
				scalesPageToFit={this.state.scalesPageToFit}
			/>
		)
	}
	
	// 获取值
	componentWillMount() {
		let title = this.props.navigation.getParam('title');
		let passProps = this.props.navigation.getParam('passProps');
	}
	
	componentDidMount() {
		// 请求路径 http://c.3g.163.com/nc/article/DK45NDV2000189FH/full.html
		let url_api = 'http://c.3g.163.com/nc/article/' + this.props.navigation.getParam('docId') + '/full.html';
		// 发送请求
		fetch(url_api)
			.then((response) => response.json())
			.then((responseData) => {
				// 处理拿到的数据
				let allData = responseData[this.props.navigation.getParam('docId')];
				// 拿到body, 跨级取数据
				let bodyHtml = allData['body'];
				// 替换图片数据
				if (allData['img'].length > 0) {
					// 遍历
					for (let i = 0; i < allData['img'].length; i++) {
						// 取出单个图片对象
						let img = allData['img'][i];
						// 取出src
						let imgSrc = img['src'];
						let imgHtml = '<img src="' + imgSrc + '" width="100%">';
						// 替换body中的图像占位符
						bodyHtml = bodyHtml.replace(img['ref'], imgHtml);
					}
				}
				// 更新状态机
				this.setState({
					detailData: bodyHtml
				})
			})
			.catch((error) => {
				alert('请求数据失败')
			})
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#DDD'
	}
});

/**
 * 导出当前Module
 */
module.exports = Detail;